<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 底部导航 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="page">
            <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
                <el-tab-pane label="PC端" name="first">
                    <el-button type="text" @click="pc_nav = 1">顶部导航</el-button>
                    <el-button type="text" @click="pc_nav = 2">底部导航</el-button>
                    <div class="nav_content" v-if="pc_nav == 1">
                        <el-button @click="add_nav" type="primary" size="mini">新增顶部导航</el-button>
                        <div class="nav_list">
                            <div class="nav_item" v-for="(item, index) in nav_item" :key="index">
                                <el-input v-model="item.nav_title" placeholder="请输入导航内容" size="mini" class="input"></el-input>
                                <div class="nav_item_link">
                                    <el-button @click="choose_link(index)" type="info" plain size="mini">选择链接</el-button>
                                    <span class="ml10">{{ item.link.type_title }}</span> /
                                    <span class="title">{{ item.link.title }}</span>
                                </div>
                                <span @click="del(index)" class="del">x</span>
                            </div>
                        </div>
                        <el-button @click="pc_save" type="success" size="mini">保存</el-button>
                    </div>
                    <div class="nav_content" v-if="pc_nav == 2">
                        <el-button @click="add_nav_footer" type="primary" size="mini">新增底部导航</el-button>
                        <div class="nav_list">
                            <div class="nav_item" v-for="(item, index) in nav_item_footer" :key="index">
                                <el-input v-model="item.nav_title" placeholder="请输入导航内容" size="mini" class="input"></el-input>
                                <div class="nav_item_link">
                                    <el-button @click="choose_link(index)" type="info" plain size="mini">选择链接</el-button>
                                    <span class="ml10">{{ item.link.type_title }}</span> /
                                    <span class="title">{{ item.link.title }}</span>
                                </div>
                                <span @click="del_footer(index)" class="del">x</span>
                            </div>
                        </div>
                        <el-button @click="pc_save_footer" type="success" size="mini">保存</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="移动端" name="second">
                    <div class="wap_page">
                        <div class="wap_nav">
                            <div class="page-footer">
                                <div class="page-footer-preview">
                                    <div class="item enable system" style="width: 50%" v-for="(item, index) in nav_item_wap" :key="index">
                                        <img :src="item.icon_url" class="item-image" />
                                        <div class="item-text">{{ item.nav_title }}</div>
                                    </div>
                                </div>
                            </div>
                            <!-- 自定义 -->
                            <div class="footer-config-box this-page">
                                <div>
                                    <div class="panel">
                                        <div class="panel-heading">底部导航</div>
                                        <div class="panel-body">
                                            <div class="footer-nav-box">
                                                <!-- <div class="footer-nav-form-item">
                                                    <div class="choose">
                                                        <el-select v-model="nav_num" @change="select_nav_num">
                                                            <el-option
                                                                v-for="item in options"
                                                                :key="item.value"
                                                                :label="item.label"
                                                                :value="item.value"
                                                            >
                                                            </el-option>
                                                        </el-select>
                                                    </div>
                                                </div> -->
                                                <div
                                                    class="form-horizontal footer-nav-form-item enable system nav_item_wap"
                                                    v-for="(item, index) in nav_item_wap"
                                                    :key="index"
                                                >
                                                    <div class="form-group">
                                                        <div class="col-sm-12">
                                                            <el-input v-model="item.nav_title" size="mini" class="input"></el-input>
                                                            <div class="nav_item_wap_link" v-if="item.link.param">
                                                                <el-button @click="choose_link(index)" type="info" plain size="mini"
                                                                    >选择链接</el-button
                                                                >
                                                                <span class="ml10">{{ item.link.type_title }}</span> /
                                                                <span class="title">{{ item.link.title }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <el-button @click="wap_save" type="success" size="mini" class="wap_save">保存</el-button>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 导航链接弹框 -->
        <el-dialog width="30%" title="选择链接类型" :visible.sync="navLinkVisible">
            <div class="link_type">
                <div class="link_detail" v-for="(item, index) in link_type" :key="index">
                    <el-button @click="link_to_detail(item.type)" type="info" plain>{{ item.type }}</el-button>
                </div>
            </div>
        </el-dialog>
        <!-- 导航链接详情弹框 -->
        <el-dialog width="36%" title="详情页" @close="exit" :visible.sync="navLinkDetailVisible" append-to-body>
            <el-form ref="form" :model="navDetailform" label-width="100px">
                <el-form-item>
                    <div class="handle-box">
                        <el-input v-model="query.keyword" placeholder="输入标题" class="handle-input mr10"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="navDetailSearch">搜索</el-button>
                    </div>
                </el-form-item>
                <el-table
                    :data="chooseNavDetailTableData"
                    @row-click="chooseRow"
                    class="chooseNavDetailTable"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="title" label="标题"> </el-table-column>
                    <el-table-column prop="port_type" label="端"> </el-table-column>
                    <el-table-column prop="update_time" label="更新时间"> </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.page"
                        :page-size="query.rows"
                        :total="navDetailTotal"
                        @current-change="navDetailPageChange"
                    ></el-pagination>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exit">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { customListData, footerNavListData, editFooterNavData } from '../../api/index';
export default {
    // name: 'nav',
    data() {
        return {
            activeName: 'first',
            query: {
                type: '',
                page: 1,
                rows: 4,
                keyword: ''
            },
            pc_nav: 1,
            nav_item_index: '',
            nav_item: [],
            nav_item_footer: [],
            link_type: [
                {
                    type: '自定义页面'
                }
                // {
                //     type: '课程列表'
                // },
                // {
                //     type: '课程详情'
                // },
                // {
                //     type: '专栏列表'
                // },
                // {
                //     type: '专栏详情'
                // },
                // {
                //     type: '试卷列表'
                // },
                // {
                //     type: '试卷详情'
                // }
            ],
            options: [
                {
                    value: '2',
                    label: '2列'
                },
                {
                    value: '3',
                    label: '3列'
                },
                {
                    value: '4',
                    label: '4列'
                },
                {
                    value: '5',
                    label: '5列'
                }
            ],
            nav_item_wap: [],
            nav_num: '2列',
            navDetailform: {},
            chooseNavDetailTableData: [],
            navLinkVisible: false,
            navLinkDetailVisible: false,
            navDetailTotal: 0
        };
    },
    created() {
        this.getData();
    },
    mounted() {
        this.tableLocal();
    },
    methods: {
        getData() {
            footerNavListData().then((res) => {
                this.nav_item = res.data.navtar.head_nav;
                this.nav_item_footer = res.data.navtar.foot_nav;
                this.nav_item_wap = res.data.footer.data;
                this.nav_num = res.data.footer.colume;
            });
        },
        handleClick(tab) {
            localStorage.setItem('wap', tab.name);
        },
        tableLocal() {
            if (localStorage.getItem('wap') !== null) {
                this.activeName = localStorage.getItem('wap');
            }
        },
        choose_link(index) {
            this.navLinkVisible = true;
            this.nav_item_index = index;
        },
        link_to_detail() {
            this.navLinkDetailVisible = true;
            localStorage.getItem('wap') == 'first' ? (this.query.type = 'pc') : (this.query.type = 'mobile');
            customListData(this.query).then((res) => {
                this.chooseNavDetailTableData = res.data.list;
                this.navDetailTotal = res.data.count;
            });
        },
        navDetailSearch() {
            this.link_to_detail();
        },
        navDetailPageChange(val) {
            this.$set(this.query, 'page', val);
            this.link_to_detail();
        },
        chooseRow(row) {
            if (localStorage.getItem('wap') == 'first' && this.pc_nav == 1) {
                this.nav_item[this.nav_item_index].link.param.id = row.id;
                this.nav_item[this.nav_item_index].link.type_title = '自定义页面';
                this.nav_item[this.nav_item_index].link.title = this.nav_item[this.nav_item_index].link.param.title = row.title;
            } else if (localStorage.getItem('wap') == 'first' && this.pc_nav == 2) {
                this.nav_item_footer[this.nav_item_index].link.param.id = row.id;
                this.nav_item_footer[this.nav_item_index].link.type_title = '自定义页面';
                this.nav_item_footer[this.nav_item_index].link.title = this.nav_item_footer[this.nav_item_index].link.param.title =
                    row.title;
                this.nav_item_footer[
                    this.nav_item_index
                ].link.url = `./index.php?i=1&c=entry&a=webapp&do=page&id=${row.id}&title=${row.title}&m=muu_classroom`;
            } else {
                this.nav_item_wap[this.nav_item_index].link.param.id = row.id;
                this.nav_item_wap[this.nav_item_index].link.type_title = '自定义页面';
                this.nav_item_wap[this.nav_item_index].link.title = this.nav_item_wap[this.nav_item_index].link.param.title = row.title;
            }

            console.log(this.nav_item_wap);

            this.navLinkDetailVisible = false;
            this.navLinkVisible = false;
        },
        exit() {
            this.navLinkDetailVisible = false;
            this.query.page = 1;
            this.query.keyword = '';
        },
        add_nav() {
            this.nav_item.push({
                nav_title: '',
                link: { sys_type: 'detail', title: '', type: 'micro_page', type_title: '', param: { id: '', title: '' } }
            });
        },
        add_nav_footer() {
            this.nav_item_footer.push({
                nav_title: '',
                link: { sys_type: 'detail', title: '', type: 'micro_page', type_title: '', url: '', param: { id: '', title: '' } }
            });
        },
        del(index) {
            this.nav_item.splice(index, 1);
        },
        del_footer(index) {
            this.nav_item_footer.splice(index, 1);
        },
        pc_save() {
            editFooterNavData({ 'head_nav': this.nav_item }).then((res) => {
                if (res.code == 1) {
                    this.$message.success('保存顶部导航成功');
                    setTimeout(() => {
                        location.reload();
                    }, 200);
                }
            });
        },
        pc_save_footer() {
            editFooterNavData({ 'foot_nav': this.nav_item_footer }).then((res) => {
                if (res.code == 1) {
                    this.$message.success('保存底部导航成功');
                    setTimeout(() => {
                        location.reload();
                    }, 200);
                }
            });
        },
        // 移动端
        // select_nav_num(val) {
        //     if (val == '3') {
        //         this.nav_item_wap = [];
        //         this.nav_item_wap.push({
        //             nav_title: '导航',
        //             link: { sys_type: 'detail', title: '', type: 'micro_page', type_title: '', param: { id: '', title: '' } }
        //         });
        //     } else if (val == '4') {
        //         // this.nav_item_wap = [];
        //         this.nav_item_wap.push(
        //             {
        //                 nav_title: '导航',
        //                 link: { sys_type: 'detail', title: '', type: 'micro_page', type_title: '', param: { id: '', title: '' } }
        //             },
        //             {
        //                 nav_title: '导航',
        //                 link: { sys_type: 'detail', title: '', type: 'micro_page', type_title: '', param: { id: '', title: '' } }
        //             }
        //         );
        //     } else if (val == '5') {
        //         // this.nav_item_wap = [];
        //         this.nav_item_wap.push(
        //             {
        //                 nav_title: '导航',
        //                 link: { sys_type: 'detail', title: '', type: 'micro_page', type_title: '', param: { id: '', title: '' } }
        //             },
        //             {
        //                 nav_title: '导航',
        //                 link: { sys_type: 'detail', title: '', type: 'micro_page', type_title: '', param: { id: '', title: '' } }
        //             },
        //             {
        //                 nav_title: '导航',
        //                 link: { sys_type: 'detail', title: '', type: 'micro_page', type_title: '', param: { id: '', title: '' } }
        //             }
        //         );
        //     } else {
        //         this.nav_item_wap = [];
        //     }
        // }
        wap_save() {
             editFooterNavData({ 'footer[data]': this.nav_item_wap }).then((res) => {
                if (res.code == 1) {
                    this.$message.success('保存底部导航成功');
                    setTimeout(() => {
                        location.reload();
                    }, 200);
                }
            });
        }
    }
};
</script>

<style scoped>
.nav_content {
    margin-top: 50px;
    margin-left: 30%;
}
.nav_list {
    margin: 30px 0;
    border-bottom: 1px solid #eee;
}
.nav_item {
    display: flex;
}
.nav_item .input {
    flex: 0.3;
}
.nav_item_link {
    margin: 0 0 30px 30px;
}
.nav_item_link .ml10 {
    margin-left: 10px;
    font-size: 13px;
}
.nav_item_link .title {
    color: #808080;
    font-size: 13px;
}
.nav_item .del {
    margin-left: 20%;
    color: red;
    cursor: pointer;
}
.link_detail {
    display: inline-block;
    margin: 20px;
}
/* 链接详情页 */
.handle-input {
    width: 300px;
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
.chooseNavDetailTable {
    cursor: pointer;
}
/* 移动端 */
.wap_page {
    padding: 10px;
    height: 833px;
}
.wap_nav {
    position: relative;
    width: 373px;
    border: 1px solid #ddd;
}
.page-footer .page-footer-preview {
    width: 100%;
    min-height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 5px 0 0;
}
.page-footer .page-footer-preview .item {
    height: 100%;
    margin-right: 1px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.page-footer .page-footer-preview .item .item-image {
    width: 26px;
    height: 26px;
}
.page-footer .page-footer-preview .item .item-text {
    font-size: 12px;
}
/* 移动端-自定义 */
.footer-config-box {
    position: absolute;
    top: 0;
    left: 373px;
    margin-left: 20px;
    width: 360px;
}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-color: #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}
.panel-heading {
    font-size: 13px;
    padding: 8px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}
.panel-body {
    padding: 15px;
}
.footer-config-box .footer-nav-form-item {
    margin-bottom: 10px;
    padding: 5px;
}

.nav_item_wap {
    padding: 5px;
}

.nav_item_wap .nav_item_wap_link {
    margin: 10px 0;
}
.nav_item_wap_link .ml10 {
    margin-left: 10px;
    font-size: 13px;
}
.nav_item_wap_link .title {
    color: #808080;
    font-size: 13px;
}
.wap_save {
    position: absolute;
    margin-top: 20px;
}
</style>